<!-- src/components/Header.vue -->
<template>
  <header class="main-header" v-if="userType === 2">
    <div class="header-container">
      <!-- 左侧Logo和导航 -->
      <div class="left-section">
        <router-link to="/home" class="logo-link">
          <el-icon :size="32"><FirstAidKit /></el-icon>
          <h1 class="logo-text">在线门诊</h1>
        </router-link>

        <el-menu style="width: 500px"
            :default-active="activeIndex"
            mode="horizontal"
            class="nav-menu"
            @select="handleSelect"
        >
          <el-menu-item index="/home">首页</el-menu-item>
          <el-menu-item index="/appointments">我的预约</el-menu-item>
        </el-menu>
      </div>

      <!-- 右侧用户状态 -->
      <div class="right-section">
        <user-status />
      </div>
    </div>
  </header>
</template>

<script setup>
import { ref, watch } from 'vue'
import { useRoute, useRouter } from 'vue-router'
import { FirstAidKit } from '@element-plus/icons-vue'
import UserStatus from '@/components/UserStatus.vue'
import {getUserInfo} from "@/utils/auth.js";

const router = useRouter()
const route = useRoute()
const activeIndex = ref('/home')
const user = ref(getUserInfo())
const userType = ref(user.value?.type || 2)

// 根据当前路由更新激活菜单项
watch(
    () => route.path,
    (newPath) => {
      if (newPath.startsWith('/home')) {
        activeIndex.value = '/home'
      } else if (newPath.startsWith('/appointments')) {
        activeIndex.value = '/appointments'
      }
    },
    { immediate: true }
)

const handleSelect = (index) => {
  router.push(index)
}
</script>

<style scoped>
.main-header {
  background: #fff;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
  position: sticky;
  top: 0;
  z-index: 1000;
}

.header-container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 20px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 60px;
}

.left-section {
  display: flex;
  align-items: center;
  gap: 40px;
}

.logo-link {
  display: flex;
  align-items: center;
  gap: 8px;
  text-decoration: none;
  color: var(--el-color-primary);
}

.logo-text {
  margin: 0;
  font-size: 24px;
  font-weight: bold;
}

.nav-menu {
  border-bottom: none;
}

/* 移动端适配 */
@media (max-width: 768px) {
  .logo-text {
    display: none;
  }

  .nav-menu {
    display: none;
  }
}
</style>
